Integrate TS Context Menu
With the TS Chart SDK, you can integrate a custom context menu into your chart. This context menu allows users to interact with the chart in a more intuitive way.
To integrate a Custom Context Menu in your Custom Chart, you can use ChartToTsEvent.ShowContextMenu
and ChartToTsEvent.HideContextMenu
.
You can define this in your onclick
event in your JavaScript code. The ChartToTsEvent.showContextMenu
will take three types of parameters:
- id: The ID for your context menu.
- clickedPoint: This will have the pair of
columnId
and values that we generated in Customize Tooltips using thegetPointDetails
function. - customActions: This will have the list of custom actions that you want to add to your context menu.
Let's have an example to add a custom action to have a console.log
statement whenever this custom action is clicked. For this, you need to define customAction
in the following way:
const customAction = {
id: "customAction",
label: "Custom Action",
action: () => {
console.log("Custom Action Clicked");
},
};
Now you can use this customAction
in the showContextMenu
function as shown below:
const yourOnClickHandler = (dataX, dataY) => {
ctx.emitEvent(ChartToTsEvent.showContextMenu, {
id: "customAction",
clickedPoint: getPointDetails(dataX, dataY),
customActions: [customAction],
});
};
Customize Native TS actions
After TS-chart-sdk 1.3.0 developers can have functionality of hidding,disabling and adding native TS context menu and action menu actions. To do so u have to define these in chartConfigParameters
.
(async () => {
const ctx = await getChartContext({
// other props
chartConfigParameters: {
customVisualConfig: {
customChartHiddenActions:[<your_hidden_actions>],
customChartDisabledActions:[<your_disabled_actions>],
customChartVisibleActions:[<your_visible_actions>]
},
},
});
})();
NOTE: The developer is advised to use either
customChartHiddenActions
orcustomChartVisibleActions
. Don't define customChartVisibleActions as empty array it may cause some issues when using with TS embed.